<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <Header title="职位管理" />

    <!-- 主要内容区域 -->
    <main class="container mx-auto px-4 py-6">
      <!-- 页面标题和操作 -->
      <div class="flex justify-between items-center mb-6">
        <div>
          <h1 class="text-2xl font-bold text-gray-800 mb-2">职位管理</h1>
          <p class="text-gray-600">管理您发布的所有职位</p>
        </div>
        <router-link 
          to="/post-job"
          class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 flex items-center"
        >
          <i class="ri-add-line mr-2"></i>
          发布新职位
        </router-link>
      </div>

      <!-- 统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-sm p-6">
          <div class="flex items-center">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
              <i class="ri-briefcase-line text-blue-600 text-xl"></i>
            </div>
            <div>
              <div class="text-2xl font-bold text-gray-800">{{ stats.total }}</div>
              <div class="text-gray-500 text-sm">总职位数</div>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6">
          <div class="flex items-center">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
              <i class="ri-play-circle-line text-green-600 text-xl"></i>
            </div>
            <div>
              <div class="text-2xl font-bold text-gray-800">{{ stats.active }}</div>
              <div class="text-gray-500 text-sm">招聘中</div>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6">
          <div class="flex items-center">
            <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
              <i class="ri-eye-line text-yellow-600 text-xl"></i>
            </div>
            <div>
              <div class="text-2xl font-bold text-gray-800">{{ stats.totalViews }}</div>
              <div class="text-gray-500 text-sm">总浏览量</div>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6">
          <div class="flex items-center">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
              <i class="ri-user-line text-purple-600 text-xl"></i>
            </div>
            <div>
              <div class="text-2xl font-bold text-gray-800">{{ stats.totalApplications }}</div>
              <div class="text-gray-500 text-sm">总投递数</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 筛选和搜索 -->
      <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <div class="flex flex-wrap items-center gap-4">
          <div class="flex items-center">
            <label class="text-sm text-gray-600 mr-2">状态：</label>
            <select 
              v-model="filterStatus"
              class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
            >
              <option value="">全部状态</option>
              <option value="active">招聘中</option>
              <option value="pending">待审核</option>
              <option value="closed">已关闭</option>
              <option value="failed">审核失败</option>
            </select>
          </div>
          
          <div class="flex items-center">
            <label class="text-sm text-gray-600 mr-2">部门：</label>
            <select 
              v-model="filterDepartment"
              class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
            >
              <option value="">全部部门</option>
              <option value="产品部">产品部</option>
              <option value="技术部">技术部</option>
              <option value="市场部">市场部</option>
              <option value="销售部">销售部</option>
            </select>
          </div>
          
          <div class="flex-1 max-w-md">
            <div class="relative">
              <input 
                v-model="searchQuery"
                type="text" 
                placeholder="搜索职位名称..." 
                class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
              >
              <i class="ri-search-line absolute left-3 top-2.5 text-gray-400"></i>
            </div>
          </div>
          
          <button 
            @click="resetFilters"
            class="px-4 py-2 text-gray-600 hover:text-primary text-sm"
          >
            重置筛选
          </button>
        </div>
      </div>

      <!-- 职位列表 -->
      <div class="bg-white rounded-lg shadow-sm">
        <div class="p-4 border-b">
          <div class="flex justify-between items-center">
            <h2 class="font-medium text-gray-800">职位列表</h2>
            <div class="flex items-center space-x-2">
              <button 
                @click="viewMode = 'list'"
                :class="[
                  'p-2 rounded',
                  viewMode === 'list' ? 'bg-primary text-white' : 'text-gray-400 hover:text-gray-600'
                ]"
              >
                <i class="ri-list-unordered"></i>
              </button>
              <button 
                @click="viewMode = 'grid'"
                :class="[
                  'p-2 rounded',
                  viewMode === 'grid' ? 'bg-primary text-white' : 'text-gray-400 hover:text-gray-600'
                ]"
              >
                <i class="ri-grid-line"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div v-if="viewMode === 'list'">
          <JobManagementListItem 
            v-for="job in filteredJobs"
            :key="job.id"
            :job="job"
            @edit="editJob"
            @delete="deleteJob"
            @toggle-status="toggleJobStatus"
            @view-applications="viewApplications"
          />
        </div>
        
        <div v-else class="p-4">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <JobManagementCard 
              v-for="job in filteredJobs"
              :key="job.id"
              :job="job"
              @edit="editJob"
              @delete="deleteJob"
              @toggle-status="toggleJobStatus"
              @view-applications="viewApplications"
            />
          </div>
        </div>
        
        <div v-if="filteredJobs.length === 0" class="p-8 text-center text-gray-500">
          <i class="ri-inbox-line text-4xl mb-4"></i>
          <p>暂无职位数据</p>
        </div>
      </div>

      <!-- 分页 -->
      <div class="flex justify-center mt-8">
        <div class="flex items-center space-x-2">
          <button class="px-3 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50">
            <i class="ri-arrow-left-s-line"></i>
          </button>
          <button class="px-3 py-2 bg-primary text-white rounded">1</button>
          <button class="px-3 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50">2</button>
          <button class="px-3 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50">3</button>
          <button class="px-3 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50">
            <i class="ri-arrow-right-s-line"></i>
          </button>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useJobsStore } from '../stores/jobs'
import Header from '../components/Header.vue'
import JobManagementListItem from '../components/JobManagementListItem.vue'
import JobManagementCard from '../components/JobManagementCard.vue'

const router = useRouter()
const jobsStore = useJobsStore()

const viewMode = ref<'list' | 'grid'>('list')
const filterStatus = ref('')
const filterDepartment = ref('')
const searchQuery = ref('')

const stats = computed(() => {
  const jobs = jobsStore.jobs
  return {
    total: jobs.length,
    active: jobs.filter(job => job.status === 'active').length,
    totalViews: jobs.reduce((sum, job) => sum + job.views, 0),
    totalApplications: jobs.reduce((sum, job) => sum + job.communications, 0)
  }
})

const filteredJobs = computed(() => {
  let jobs = jobsStore.jobs
  
  if (filterStatus.value) {
    jobs = jobs.filter(job => job.status === filterStatus.value)
  }
  
  if (filterDepartment.value) {
    jobs = jobs.filter(job => job.department === filterDepartment.value)
  }
  
  if (searchQuery.value) {
    jobs = jobs.filter(job => 
      job.title.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }
  
  return jobs
})

const resetFilters = () => {
  filterStatus.value = ''
  filterDepartment.value = ''
  searchQuery.value = ''
}

const editJob = (jobId: string) => {
  router.push(`/post-job?edit=${jobId}`)
}

const deleteJob = (jobId: string) => {
  if (confirm('确定要删除这个职位吗？')) {
    jobsStore.deleteJob(jobId)
    alert('职位已删除')
  }
}

const toggleJobStatus = (jobId: string) => {
  const job = jobsStore.jobs.find(j => j.id === jobId)
  if (job) {
    const newStatus = job.status === 'active' ? 'closed' : 'active'
    jobsStore.updateJob(jobId, { status: newStatus })
    alert(`职位已${newStatus === 'active' ? '开启' : '关闭'}`)
  }
}

const viewApplications = (jobId: string) => {
  router.push(`/job-applications/${jobId}`)
}
</script>
